<template>
	<sw-common-frame :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">添加学员</el-button>
		</template>
		<el-table slot="table" size="medium" ref="table" :data="studentTableData" stripe height="100%">
			<el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
			<el-table-column label="用户姓名/账号" min-width="160" :formatter="returnUserAccount" />
			<el-table-column label="状态" min-width="70" :formatter="returnAuditStatus" />
			<el-table-column prop="createName" label="申请描述" min-width="240"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="160" />
			<el-table-column label="操作" width="132">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="warning" @click="handleUserSort(row)">排序</el-button>
					<el-button size="mini" type="danger" @click="handleDeleteData(row)">移除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<added-student v-model="formDialog" :list="studentTableData" :course-id="courseId" @refresh="queryTableData()"></added-student>
	</sw-common-frame>
</template>

<script>
import sortValue from './sortValue';
import addedStudent from './selectUser';
import listMixins from '@/mixins/listMixins';
import { getCourseStudyPageList, deleteCourseStudy, updateCourseStudy } from '@/api/course/sysCourseStudent';
export default {
	beforeRouteEnter(to, from, next) {
		to.meta['hasBack'] = true;
		next();
	},
	mixins: [listMixins],
	components: { addedStudent },
	data() {
		return {
			handName: '移除',
			pageName: '学员'
		};
	},
	computed: {
		courseId() {
			return this.$route.params.id;
		},
		listFunction() {
			return eval(getCourseStudyPageList);
		},
		deleteFunction() {
			return eval(deleteCourseStudy);
		},
		requestParams() {
			return { page: 1, limit: 9999, courseId: this.courseId };
		},
		studentTableData() {
			return this.tableData.map((item) => {
				return { ...item, name: item.userName };
			});
		}
	},
	methods: {
		//返回用户账号名称
		returnUserAccount(data) {
			let userData = data?.sysUser || {};
			return `${userData.userName}（${userData.account}）`;
		},

		//返回审核状态
		returnAuditStatus(data) {
			let tagName = '';
			let attrs = { size: 'medium' };
			if (data.auditStatus === '1') {
				tagName = '待审核';
				attrs['type'] = 'warning';
			} else if (data.auditStatus === '2') {
				tagName = '已通过';
				attrs['type'] = 'success';
			} else if (data.auditStatus === '3') {
				tagName = '已拒绝';
				attrs['type'] = 'danger';
			}
			return this.$createElement('elTag', { attrs }, tagName);
		},

		//学员排序
		handleUserSort(data) {
			let that = this;
			let orderBy = parseInt(data.orderBy);
			this.$msgbox({
				title: '更新排序',
				message: this.$createElement(sortValue, {
					style: { width: '100%' },
					props: { value: orderBy, max: 999 },
					attrs: { title: '修改课程学员排序' },
					on: {
						input(value) {
							orderBy = value;
						}
					}
				}),
				showCancelButton: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						let params = { id: data.id, orderBy };
						instance.confirmButtonLoading = true;
						await that.updateSortRequest(params);
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//更新排序请求
		async updateSortRequest(params) {
			let result = await updateCourseStudy(params).then((res) => res.data);
			if (result.code === '0') {
				this.queryTableData();
				this.$message.success('更新排序成功');
			}
		}
	}
};
</script>

<style scoped></style>
